@defikitdotnet/education-module-ai
Version:
AI Education Module using Agent Framework
73 lines (72 loc) • 8.21 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var router_1 = require("next/router");
var button_1 = require("../../../../../../components/ui/button");
var card_1 = require("../../../../../../components/ui/card");
var alert_1 = require("../../../../../../components/ui/alert");
var badge_1 = require("../../../../../../components/ui/badge");
var lucide_react_1 = require("lucide-react");
var useCourseContent_1 = require("../../../../../../hooks/useCourseContent");
var date_fns_1 = require("date-fns");
var ContentView = function () {
var router = (0, router_1.useRouter)();
var _a = router.query, courseId = _a.id, contentId = _a.contentId;
var _b = (0, react_1.useState)(""), agentId = _b[0], setAgentId = _b[1];
var _c = (0, useCourseContent_1.useCourseContent)(agentId), content = _c.content, isLoading = _c.isLoading, error = _c.error, fetchContent = _c.fetchContent;
(0, react_1.useEffect)(function () {
// Get teacher ID from localStorage
var storedTeacherId = localStorage.getItem("teacherId");
if (storedTeacherId) {
setAgentId(storedTeacherId);
}
}, []);
(0, react_1.useEffect)(function () {
if (courseId &&
contentId &&
typeof courseId === "string" &&
typeof contentId === "string" &&
agentId) {
fetchContent(courseId, contentId);
}
}, [courseId, contentId, agentId, fetchContent]);
var getContentTypeIcon = function (type) {
switch (type) {
case "text":
return (0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { className: "h-5 w-5" });
case "video":
return (0, jsx_runtime_1.jsx)(lucide_react_1.Video, { className: "h-5 w-5" });
case "h5p":
return (0, jsx_runtime_1.jsx)(lucide_react_1.SquareCode, { className: "h-5 w-5" });
default:
return (0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { className: "h-5 w-5" });
}
};
var renderContentByType = function () {
if (!content)
return null;
switch (content.type) {
case "text":
return ((0, jsx_runtime_1.jsx)("div", { className: "prose prose-gray max-w-none", children: (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: content.content || "" } }) }));
case "video":
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "aspect-video w-full rounded-lg overflow-hidden bg-gray-100", children: content.videoUrl ? ((0, jsx_runtime_1.jsx)("iframe", { src: content.videoUrl, className: "w-full h-full", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center h-full text-gray-400", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Video, { className: "h-10 w-10" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-2", children: "No video URL provided" })] })) }), content.videoDescription && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 prose prose-gray max-w-none", children: (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: {
__html: content.videoDescription || "",
} }) }))] }));
case "h5p":
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: "border rounded-lg p-4 bg-gray-50", children: content.h5pUrl ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: "aspect-video w-full", children: (0, jsx_runtime_1.jsx)("iframe", { src: content.h5pUrl, className: "w-full h-full border-none", allowFullScreen: true }) }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center h-40 text-gray-400", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquareCode, { className: "h-10 w-10" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-2", children: "No H5P content URL provided" })] })) }) }));
default:
return (0, jsx_runtime_1.jsx)("div", { children: "Unknown content type" });
}
};
return ((0, jsx_runtime_1.jsx)("div", { className: "container mx-auto py-8", children: (0, jsx_runtime_1.jsxs)(card_1.Card, { children: [(0, jsx_runtime_1.jsxs)(card_1.CardHeader, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", size: "icon", className: "mr-4", onClick: function () {
return router.push("/teacher/course/".concat(courseId, "/content"));
}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-4 w-4" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(card_1.CardTitle, { className: "text-2xl", children: isLoading ? "Loading..." : (content === null || content === void 0 ? void 0 : content.title) || "Content" }), (0, jsx_runtime_1.jsx)(card_1.CardDescription, { children: content === null || content === void 0 ? void 0 : content.description })] })] }), content && ((0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "outline", onClick: function () {
return router.push("/teacher/course/".concat(courseId, "/content/").concat(contentId, "/edit"));
}, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Edit, { className: "mr-2 h-4 w-4" }), " Edit Content"] }))] }), (content === null || content === void 0 ? void 0 : content.type) && ((0, jsx_runtime_1.jsxs)(badge_1.Badge, { variant: "outline", className: "flex items-center w-fit gap-1 mt-2", children: [getContentTypeIcon(content.type), (0, jsx_runtime_1.jsx)("span", { className: "capitalize", children: content.type })] }))] }), (0, jsx_runtime_1.jsxs)(card_1.CardContent, { children: [error && ((0, jsx_runtime_1.jsxs)(alert_1.Alert, { variant: "destructive", className: "mb-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)(alert_1.AlertTitle, { children: "Error" }), (0, jsx_runtime_1.jsx)(alert_1.AlertDescription, { children: error })] })), isLoading ? ((0, jsx_runtime_1.jsxs)("div", { className: "py-10 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]" }), (0, jsx_runtime_1.jsx)("p", { className: "mt-2", children: "Loading content..." })] })) : content ? ((0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: renderContentByType() })) : ((0, jsx_runtime_1.jsx)("div", { className: "py-10 text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-gray-500", children: "Content not found" }) }))] }), content && ((0, jsx_runtime_1.jsxs)(card_1.CardFooter, { className: "border-t pt-6 flex justify-between text-sm text-gray-500", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("p", { children: ["Order: ", (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: content.order })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsxs)("p", { children: ["Created:", " ", content.createdAt &&
(0, date_fns_1.format)(new Date(content.createdAt), "PPP")] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Last updated:", " ", content.updatedAt &&
(0, date_fns_1.formatDistanceToNow)(new Date(content.updatedAt), {
addSuffix: true,
})] })] })] }))] }) }));
};
exports.default = ContentView;